<template>
	<view class="productDetail">
		<uni-swiper-dot :info="info.covers" :dotsStyles="dotsStyles" :current="current" field="content" :mode="mode">
			<swiper class="swiper-box" @change="change" interval="3000" duration="500" circular="true" autoplay="true">
				<swiper-item v-for="(item, index) in info.covers" :key="index">
					<view class="swiper-item">
						<image :src="item.imgUrl" mode="aspectFill">
						</image>
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<view class="info">
			<view class="top">
				<view class="pic">
					<text>￥{{info.nowPrice}}</text>
				</view>
				<view class="title">
					<view>
						<text class="state" style="background:rgba(235, 89, 56, 1);">{{info.reductionName}}</text>
						{{info.name}}
					</view>
					<view v-if="info.storePrice > 0">门店价：￥{{info.storePrice}}</view>
					<view v-if="info.is_virtual > 0">会员价：￥{{info.userPrice}}</view>
				</view>
				<!-- <button  class="share" open-type="share">
					<image src="http://app.chinasrv.com/attachment/xcx/icon/icon29.png" mode="aspectFill"></image>
					<text>分享</text>
				</button> -->
			</view>
			<view class="num">
				<text>销量 {{info.sales}}</text>
				<text>库存 {{info.stock}}</text>
				<text>收藏 {{info.collect_num}}</text>
			</view>
		</view>
		<view class="content">
			<view class="content_title">商品详情</view>
			<view class="details" v-html="info.intro"></view>
		</view>
		<view class="bottom" :style="'height:' + bottomHeight + 'rpx;'">
			<view class="pay" @click="editSubType('addOrder')">立即购买</view>
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="popup">
				<image @click="close" class="close" src="http://app.chinasrv.com/attachment/xcx/icon/close.png"
					mode="aspectFill"></image>
				<view class="goods_info">
					<image :src="selAttr.picture" mode="aspectFill" @click="productView()"></image>
					<view class="right">
						<text>￥{{selAttr.price > 0 ? selAttr.price : '0.00'}}</text>
						<view class="goods_num">
							<text>库存：{{selAttr.stock}}件</text>
							<text v-if="selAttr.data_name != ''">已选：{{selAttr.data_name}}</text>
						</view>
					</view>
				</view>
				<view class="goods_num1">
					<text>购买数量</text>
					<view class="uni-numbox">
						<view class="uni-numbox-minus" :class="disableSubtract ? '' : 'uni-numbox-disabled'" @click="_calcValue('subtract')">-</view>
						<input class="uni-numbox-value" type="number" :value="inputValue" disabled="disabled">
						<view class="uni-numbox-plus" :class="disableAdd ? '' : 'uni-numbox-disabled'" @click="_calcValue('add')">+</view>
					</view>
				</view>
				<!-- <view style="text-align: right;margin-right: 20px;margin: 30rpx;">最少购买：{{min}}</view> -->
				<view class="newBtn" :style="'height:' + bottomHeight + 'rpx;'">
					<!-- <view class="add" @click="subSel('addCart')">加入购物车</view> -->
					<view class="pay" @click="subSel('addOrder')" style="background: #eb5938;">立即购买</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>


<script>
	var _self;
	import serve from '../static/request.js';
	import common from '../static/jump.js';
	import {
		Base64
	} from '../static/base64.min.js';
	export default {
		data() {
			return {
				mode: 'round',
				current: 0,
				dotsStyles: {
					backgroundColor: 'rgba(255,255,255,0.3)',
					selectedBackgroundColor: '#FFC600',
					selectedBorder: '1px rgba(255,198,0,1) solid',
					border: '1px rgba(255,255,255,0.3) solid',
					selectedBorder: '1px rgba(255,198,0,1) solid'
				}, //轮播图样式配置
				reductionRemark: '',
				field: 0,
				info: {
					name: '商品名称',
					sales: 0,
					stock: 0,
					collect_num: 0,
					recommendList: [],
					userPrice: 0,
					storePrice: 0,
					wholesalePrice: 0,
					nowPrice: 0,
					is_virtual: 0,
					series_id: 0,
					reductionName: ''
				},
				cartNum: 0,
				selAttr: {
					'picture': '',
					'price': '',
					'point_exchange': '',
					'stock': '',
					'data': '',
					'data_name': '',
				},
				min: 0,
				max: 0,
				step: 0,
				attributeList: [],
				skuList: [],
				selAttrList: [],
				noStockList: [],
				selSeriesId: 0,
				seriesList: [],
				selSkuId: 0,
				inputValue: 0,
				selAttrValName: '选择',
				disableAttrList: true,
				disableSubtract: true,
				disableAdd: true,
				isSelNum: true,
				subType: '',
				pay_type: 0,
				imgList: [],
				bottomHeight: 110,
			}
		},
		methods: {
			change(e) {
				_self.current = e.detail.current;
			},
			_calcValue(type) {
				const scale = _self.min;
				let value = _self.inputValue;
				let step = _self.step * scale;
				if (type === 'subtract') {
					value -= step
				} else if (type === 'add') {
					value = parseInt(Number(value) + Number(step))
				}
				if (value < _self.min || value > _self.max) {
					return
				}
				if (value == _self.min) {
					_self.disableSubtract = false;
				}
				if (value == _self.max) {
					_self.disableAdd = false;
				}
				_self.inputValue = value;
			},
			open() {
				_self.$refs.popup.open();
			},
			close() {
				_self.$refs.popup.close();
			},
			getInfo() {
				serve.request({
					url: '/shop/batch/info',
					data: {
						appkey: uni.getStorageSync('appkey'),
						'access-token': uni.getStorageSync('access-token'),
						field: _self.field
					}
				}).then(res => {
					if (res.code != 200) {
						uni.showToast({
							title: res.message,
							icon: 'none',
							success: function() {
								setTimeout(function() {
									common.jump('return_one')
								}, 2000)
							}
						});
						return;
					}
					_self.info = res.data;
					_self.info.intro = Base64.decode(res.data.intro).replace(/\<img/gi,
						'<img style="max-width:100%;height:auto" ');
					_self.loadData(_self.info);
					if (_self.disableAttrList) {
						_self.selAttrValName += '数量';
						_self.disableAttrList = false;
					}
					_self.obtainStock('');
				});
			},
			loadData(selData) {
				_self.inputValue = selData.min_buy;
				_self.min = selData.min_buy;
				_self.step = 1;
				_self.selAttr.picture = selData.picture;
				_self.selAttr.price = selData.nowPrice;
				_self.selAttr.stock = selData.stock;
				_self.attributeList = selData.base_attribute_format;
				_self.skuList = selData.sku;
				_self.selAttrList = [];
				let name = '';
				let data = '';
				if (_self.attributeList.length > 0) {
					_self.attributeList.forEach((item, key) => {
						let specItem = item.value[0];
						_self.$set(_self.selAttrList, item.id, specItem.base_spec_value_id);
						name += specItem.title + ' ';
						data = data ? data + '-' + specItem.base_spec_value_id : specItem.base_spec_value_id;
					});

					_self.skuList.forEach((item, key) => {
						if (item.data == data) {
							_self.selSkuId = item.id;
							_self.selAttr.picture = item.picture;
							_self.selAttr.price = item.price;
							_self.selAttr.stock = item.stock;
							_self.max = selData.max_buy == 0 ? item.stock : selData.max_buy;
							return;
						}
					});
				} else {
					let skuItem = _self.skuList[0];
					_self.selSkuId = skuItem.id;
					_self.selAttr.picture = skuItem.picture;
					_self.selAttr.price = skuItem.price;
					_self.selAttr.stock = skuItem.stock;
					_self.max = selData.max_buy == 0 ? skuItem.stock : selData.max_buy;
				}

				_self.selAttr.data_name = name;
				_self.obtainStock(data);
			},
			selAttrFun(index, index1) {
				if (_self.noStockList.indexOf(_self.attributeList[index].value[index1].base_spec_value_id) >= 0) {
					return;
				}
				if (_self.selAttrList[_self.attributeList[index].id] == _self.attributeList[index].value[index1]
					.base_spec_value_id) {
					_self.selAttrList[_self.attributeList[index].id] = 0;
				} else {
					_self.$set(_self.selAttrList, _self.attributeList[index].id, _self.attributeList[index].value[index1]
						.base_spec_value_id);
				}
				let name = '';
				let data = '';
				_self.attributeList.forEach((item, key) => {
					if (_self.selAttrList[item.id]) {
						item.value.forEach((attrVal, key) => {
							if (attrVal.base_spec_value_id == _self.selAttrList[item.id]) {
								name += attrVal.title + ' ';
								data = data ? data + '-' + attrVal.base_spec_value_id : attrVal
									.base_spec_value_id;
							}
						});
					}
				});
				_self.selAttr.data_name = name;
				_self.selSkuId = 0;
				_self.skuList.forEach((item, key) => {
					if (item.data == data) {
						_self.selSkuId = item.id;
						_self.selAttr.picture = item.picture;
						_self.selAttr.price = item.price;
						_self.selAttr.stock = item.stock;
						_self.max = _self.info.max_buy == 0 ? item.stock : _self.info.max_buy;
						return;
					}
				});
				_self.obtainStock(data);
				_self.$forceUpdate();
			},
			obtainStock(data) {
				_self.noStockList = [];
				if (_self.attributeList.length == 1) {
					_self.skuList.forEach((item, key) => {
						if (item.stock == 0) {
							_self.noStockList.push(item.data);
						}
					});
				} else {
					if (data == '') {
						return;
					}
					let nowDataNum = data.split("-");
					if (_self.attributeList.length - nowDataNum.length <= 1) {
						for (let j in nowDataNum) {
							_self.skuList.forEach((item, key) => {
								// console.info("1 - " + item.data);
								if (item.data.indexOf(nowDataNum[j]) >= 0 && item.stock == 0) {
									let dataArr = item.data.split("-");
									// console.info("2 - " +dataArr);
									for (let i in dataArr) {
										// console.info("3 - " +dataArr[i]);
										if (nowDataNum.indexOf(dataArr[i]) < 0) {
											_self.noStockList.push(dataArr[i]);
										}
									}
								}
							});
						}
					}
				}
			},
			editSubType(subType) {
				_self.subType = subType;
				_self.open();
			},
			subSel(tempType = '') {
				if (_self.selSkuId == 0) {
					uni.showToast({
						title: '请选择产品属性',
						icon: 'none'
					});
					return;
				}
				_self.close();
				_self.jump('addOrder', 'order_type=5&type=wholesaler&wholesalerKey='+_self.info.wholesalerKey+'&product_id=' + _self.id + '&sku_id=' + _self.selSkuId + '&num=' +_self.inputValue);
			},
			previewImage: function(e) {
				var current = e.target.dataset.src;
				var imgKey = e.target.dataset.id;
				uni.previewImage({
					current: current,
					urls: _self.imgList[imgKey]
				});
				return;
			},
			jump(jump_type, jump_link) {
				common.jump(jump_type, jump_link);
			}
		},
		onLoad(options) {
			_self = this;
			if (uni.getSystemInfoSync().safeAreaInsets.top > 20) {
				_self.bottomHeight = 178;
			}
			let field = options.field || '';
			let fieldArr = field.split(':');
			if(fieldArr.length != 3) {
				uni.showToast({
					title: '错误的二维码',
					icon : 'none',
					success:function(){ 
						setTimeout(function () { 
							common.jump('return_one');
							return ;
						}, 2000) 
					} 
				});
				return ;
			}
			_self.field = field;
			// _self.getInfo();
		},
		onShow() {
			_self.getInfo();
		},
		onPullDownRefresh() {
			_self.getInfo();
		}
	}
</script>

<style scoped lang="scss">
	.productDetail {
		padding-bottom: 120upx;

		.pay_type {
			position: relative;
			width: 100%;
			background: #FFFFFF;

			// padding-bottom: 140upx;
			.close {
				position: absolute;
				width: 32upx;
				height: 32upx;
				right: 40upx;
				top: 45upx;
			}

			.title {
				width: 100%;
				text-align: center;
				height: 100upx;
				line-height: 100upx;
				font-size: 32upx;
				border-bottom: 1upx rgba(251, 251, 253, 1) solid;
			}

			.paypir {
				display: flex;
				justify-content: center;
				flex-direction: column;
				align-items: center;
				padding: 50upx 0upx 20upx;
				font-size: 26upx;

				text:last-child {
					color: rgba(255, 200, 10, 1);
					font-size: 32upx;
					font-weight: bold;
					margin-top: 10upx;
				}
			}

			.line2 {
				width: 100%;
				box-sizing: border-box;
				padding: 30upx;
				display: flex;
				justify-content: space-between;
				font-size: 28upx;
				border-bottom: 1upx rgba(251, 251, 253, 1) solid;

				image {
					width: 40upx;
					height: 40upx;
				}
			}

			.pay_bot {
				width: 100%;
				position: fixed;
				left: 0;
				bottom: 0upx;
				height: 100upx;
				background: rgba(255, 200, 10, 1);
				color: #fff;
		 	font-size: 32upx;
				line-height: 100upx;
				text-align: center;
				border-radius: 0;

				&::after {
					border: none;
				}
			}
		}

		.popup {
			position: relative;
			// padding-bottom: 100upx;
			width: 100%;
			background: #FFFFFF;

			.close {
				position: absolute;
				width: 32upx;
				height: 32upx;
				top: 50upx;
				right: 40upx;
			}

			.goods_info {
				display: flex;
				padding: 50upx 30upx;
				box-sizing: border-box;
				width: 100%;

				image {
					width: 170upx;
					height: 170upx
				}

				.right {
					display: flex;
					flex-direction: column;
					justify-content: center;
					color: rgba(255, 200, 10, 1);
					font-size: 32upx;
					margin-left: 18upx;

					.goods_num {
						display: flex;
						flex-direction: column;
						font-size: 20upx;
						color: rgba(153, 153, 153, 1);
						margin-top: 20upx;
					}
				}
			}

			.goods_size {
				padding: 0upx 0upx 0upx 30upx;
				box-sizing: border-box;

				.title {
					font-size: 32upx;
					margin-left: 13upx;
				}

				.size_item {
					display: flex;
					flex-wrap: wrap;
					// justify-content: space-;
					padding: 15upx 0upx 27upx;
					font-size: 28upx;

					.sel {
						width: 210upx;
						height: 64upx;
						line-height: 64upx;
						text-align: center;
						background: rgba(245, 245, 245, 1);
						border-radius: 32upx;
						margin-right: 30upx;
						margin-top: 12upx;
						color: #FFFFFF;
						background: rgba(255, 200, 10, 1);
					}

					.nosel {
						width: 210upx;
						height: 64upx;
						margin-right: 30upx;
						line-height: 64upx;
						text-align: center;
						background: rgba(245, 245, 245, 1);
						border-radius: 32upx;
						margin-top: 12upx;

						color: rgba(57, 72, 107, 0.8);
					}
				}

				.series_item {
					display: flex;
					flex-wrap: wrap;
					// justify-content: space-;
					padding: 15upx 10upx;
					font-size: 28rpx;
					border: 1rpx solid #ccc;
					margin: 10rpx;
					border-radius: 20rpx;

					.title {
						width: 69%;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					.price {
						width: 27%;
						text-align: right;
					}
				}

				.selSeries {
					color: #e00;
					border: 1rpx solid #e00;
				}
			}

			.goods_num1 {
				padding: 20upx 30upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 32upx;

				// .uni-numbox {
				// 	display: flex;
				// 	align-items: center;
				// 	height: 60upx;
				// 	background: rgba(255, 255, 255, 1);
				// 	border: 1upx solid rgba(60, 72, 104, 0.1);
				// 	border-radius: 32upx;
				// 	overflow: hidden;
				// }
				.uni-numbox {
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					height: 64upx;
					border: 1upx solid rgba(60, 72, 104, 0.1);
					border-radius: 32upx;
					overflow: hidden;
				}

				.uni-numbox-minus,
				.uni-numbox-plus {
					margin: 0;
					background-color: #f9f9f9;
					width: 100upx;
					height: 100%;
					line-height: 64upx;
					text-align: center;
					color: #555555;
				}

				.uni-numbox-minus {
					// border: 2upx solid #cccccc;  
					// border-right: none;  
					// border-top-left-radius: 6upx;  
					// border-bottom-left-radius: 6upx;  
				}

				.uni-numbox-plus {
					// border: 2upx solid #cccccc;  
					// border-left: none;  
					// border-top-right-radius: 6upx;  
					// border-bottom-right-radius: 6upx;  
				}

				.uni-numbox-value {
					// border: 1upx solid #cccccc;  
					background-color: #ffffff;
					width: 100upx;
					height: 100%;
					border-right: 1upx rgba(60, 72, 104, 0.06) solid;
					border-left: 1upx rgba(60, 72, 104, 0.06) solid;
					text-align: center;
				}

				.uni-numbox-disabled {
					color: #c0c0c0;
				}
			}

			.goods_bot {
				position: fixed;
				bottom: 0upx;
				width: 100%;
				height: 100upx;
				line-height: 100upx;
				text-align: center;
				font-size: 32upx;
				color: #FFFFFF;
				background: rgba(251, 202, 63, 1);
			}
		}

		.bottom {
			position: fixed;
			// justify-content: space-between;
			align-items: center;
			bottom: 0upx;
			height: 100upx;
			display: flex;
			width: 100%;
			background: #FFFFFF;
			.pay {
				width: 100%;
				height: 100upx;
				line-height: 100upx;
				font-size: 32upx;
				color: rgba(255, 255, 255, 1);
				text-align: center;
				background: #EB5938;
			}
		}

		.swiper-box {
			width: 100%;
			height: 750upx;

			.swiper-item {
				width: 100%;

				image {
					width: 100%;
					height: 750upx;
				}
			}
		}

		.info {
			box-sizing: border-box;
			padding: 41upx 0upx 50upx 30upx;
			border-bottom: 16upx rgba(251, 251, 253, 1) solid;

			.top {
				border-bottom: 1upx rgba(57, 72, 107, 0.08) solid;
				position: relative;

				.pic {
					display: flex;
					align-items: center;
					font-size: 20upx;
					align-items: center;

					text:nth-child(1) {
						font-size: 40upx;
						color: rgba(255, 198, 0, 1);
						margin-right: 10upx;
					}

					text:nth-child(3) {
						font-size: 20upx;
						color: rgba(57, 72, 107, 0.5);
						margin-left: 30upx;
						text-decoration: line-through;
					}
				}

				.title {
					view {
						margin-bottom: 20upx;
						color: #999;
					}

					view:first-child {
						font-size: 32upx;
						font-weight: bold;
						color: #000000;
					}

					padding: 40upx 20upx;

					.state {
						padding: 5upx 8upx;
						text-align: center;
						color: #FFFFFF;
						font-size: 32upx;
						border-radius: 2upx;
					 margin-right: 10upx;
					}
				}

				.share {
					position: absolute;
					right: 30upx;
					top: 0upx;
					align-items: center;
					font-size: 28upx;
					border: 1rpx solid #ccc;
					border-radius: 14upx;
					background: white;
					display: flex;
					align-items: center;
					background: #FFFFFF;
					padding: 10upx;
				}
			}

			.num {
				display: flex;
				padding-right: 30upx;
				padding-top: 30upx;
				justify-content: space-between;
				font-size: 28upx;
				color: rgba(57, 72, 107, 0.5);
			}
		}

		.line {
			display: flex;
			padding: 47upx 31upx;
			justify-content: space-between;
			align-items: center;
			border-bottom: 16upx #FBFBFD solid;

			.left {
				display: flex;
				font-size: 28upx;
				align-items: center;

				text:last-child {
					margin-left: 30upx;
					color: rgba(57, 72, 107, 0.3);
				}
			}

			.right {
				position: relative;
				font-size: 28upx;
				color: rgba(57, 72, 107, 0.5);
				padding-right: 23upx;
			}

			.right::before {
				position: absolute;
				right: 0upx;
				top: -2upx;
				content: '';
				border: 1upx solid #CCCCCC;
				border-width: 0 1upx 1upx 0;
				padding: 6upx;
				transform: rotate(-45deg);
				-webkit-transform: rotate(-45deg);
			}
		}

		.content {
			position: relative;
			box-sizing: border-box;
			width: 100%;
			padding: 47upx 30upx;
			border-bottom: 16upx rgba(251, 251, 253, 0.8) solid;

			.details {
				font-size: 28upx;
				line-height: 45upx;
				padding-top: 37upx;

				::v-deep {

					img,
					p,
					span {
						width: 100%;
					}
				}
			}

			// .details >>> img,p,span {
			//   width: 100%;
			// }

			.content_title {
				position: relative;
				width: 130upx;
				font-size: 24upx;
				text-align: center;
				height: 24upx;
				line-height: 24upx;
			}

			.content_title::before {
				content: '';
				position: absolute;
				left: 0;
				top: 0;
				width: 6upx;
				height: 24upx;
				background: rgba(255, 198, 0, 1);
				border-radius: 2upx;
			}


		}

		.heng {
			width: 100%;
			height: 20upx;
			background: #F7F7F7;
		}

		.newBtn {
			display: flex;

			view {
				// position: fixed;
				bottom: 0upx;
				width: 100%;
				height: 100upx;
				line-height: 100upx;
				text-align: center;
				font-size: 32upx;
				color: #FFFFFF;
				background: rgba(251, 202, 63, 1);
			}
		}
	}
</style>
